<template>
  <div>
    <pageHeader></pageHeader>
    <div class="course-infos">
      <div class="path">
        <i class="learn-course-font" v-bind:class="{ 'font-color': fontFlag }" @click="onlearn" @mouseover="comeLearn" @mouseout="leaveLearn"
          >学习课件</i
        >
        <i>></i>
        <i>课程详情</i>
      </div>
      <div class="course-info-main c">
        <div class="course-bo">
          <div class="course-bo-content-left">
            <div class="course-bo-content-img" @click="onVideo">
              <img :src="courseData.photo" width="430" height="271.5" />
            </div>
          </div>
          <div class="course-bo-content-right">
            <div class="l">
              <h1>{{ courseData.name }}</h1>
            </div>
            <div class="course-fu-title">
              <el-button size="mini">{{ courseData.firstTag }}</el-button>
              <el-button size="mini">{{ courseData.secondTag }}</el-button>
            </div>
            <div class="course-liji">
              <el-button size="medium" @click="onVideo" round>立即观看</el-button>
              <el-button size="medium" @click="testExam" round>进入考试</el-button>
            </div>
            <div class="course-share" data-cmd="follow">
              <i class="course-follow-action"></i>
              <div v-show="collectionFlag == 1" @click="onCollection(1)" class="collect-star">
                <img src="@/assets/img/courseware/collect.jpg" />
              </div>
              <div v-show="collectionFlag == 0" @click="onCollection(0)" class="collect-star">
                <img src="@/assets/img/courseware/uncollect.jpg" />
              </div>
              <!-- <span v-model="collectionFlag" @change="onCollection(collectionFlag)"></span> -->
              <!-- <el-rate v-model="collectionFlag" @change="onCollection(collectionFlag)" :max="max"></el-rate> -->
              <!-- <el-rate v-model="value" @change="test"></el-rate> -->
              <span class="course-collect">收藏</span>
              <span>{{ courseData.collectionNum }}人学过</span>
            </div>
          </div>
        </div>
        <div class="course-title">
          <div class="course-zw1"></div>
          <div class="course-catelog course-font" v-bind:class="{ 'bottom-line': courseFlag == 1 }" @click="onCourse(1)">目录</div>
          <div class="course-intro course-font" @click="onCourse(2)" v-bind:class="{ 'bottom-line': courseFlag == 2 }">简介</div>
          <div v-bind:class="{ 'bottom-line': courseFlag == 3 }" class="course-ppt course-font" @click="onCourse(3)">PPT</div>
          <div class="course-zw2"></div>
        </div>
        <course-content v-if="courseFlag == 1" :contentList="contentList"></course-content>
        <course-info v-else-if="courseFlag == 2" ref="info" :information="information"></course-info>
        <course-ppt v-else-if="courseFlag == 3"></course-ppt>
      </div>
    </div>
  </div>
</template>
<script>
import pageHeader from "@/components/PageHeader.vue";
import courseContent from "./content.vue";
import courseInfo from "./info.vue";
import coursePpt from "./ppt.vue";
// import moment from "moment";

export default {
  name: "courseWareDetail",
  created() {},
  mounted() {
    this.init1();
  },
  components: {
    pageHeader,
    courseContent,
    courseInfo,
    coursePpt,
  },
  data() {
    return {
      img: require("@/assets/imgs/at1.png"),
      courseFlag: 1,
      courseData: {},
      collectionFlag: "0",
      max: 1,
      courseInfo: {},
      contentList: [],
      fontFlag: false,
      information: "",
      coursewareId: "",
    };
  },
  methods: {
    testExam() {
      this.$router.push({
        path: "/entranceExam/index",
      });
    },
    init1() {
      //课程数据
      this.getCourseData();
      //收藏信息
      this.getCourseCollection();
    },
    getCourseData() {
      this.courseInfo = this.$route.params;
      let params = this.$route.params;
      let cid = this.$route.query.id;
      this.coursewareId = cid;
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/courseware/selectCourseware",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: "appid-xinyun-0003",
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/courseware/selectCourseware", time),
            timestamp: time,
          },
          data: {
            coursewareId: cid,
          },
        })
        .then((res) => {
          if ("00000" === res.retCode) {
            res.data.photo = this.config.imgPath + res.data.photo;
            this.courseData = res.data;
            this.information = res.data.introduction;
            // collectionNum
            //目录 ,
            this.onCourse("1");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getCourseCollection() {
      let cid = this.$route.query.id;
      let _this = this;
      let time = new Date().valueOf();
      _this
        .$http({
          url: "/wisdomlearn/userCollection/selectUserCollection",
          method: "post",
          headers: {
            accessToken: _this.config.token,
            appId: "appid-xinyun-0003",
            userId: JSON.parse(_this.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: _this.tool.sign("/wisdomlearn/userCollection/selectUserCollection", time),
            timestamp: time,
          },
          data: {
            collectionId: cid,
          },
        })
        .then((res) => {
          if ("00000" === res.retCode) {
            if (res.data) {
              this.collectionFlag = "1";
            } else {
              this.collectionFlag = "0";
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onCollection(param) {
      let params1 = this.$route.params;
      let cid = this.$route.query.id;
      let _this = this;
      if (param == "0") {
        //收藏
        let time = new Date().valueOf();
        _this
          .$http({
            url: "/wisdomlearn/userCollection/insertUserCollectionInfo",
            method: "post",
            headers: {
              accessToken: _this.config.token,
              userId: JSON.parse(_this.tool.getCookie("xinyun-front-userInfo")).userId,
              appId: "appid-xinyun-0003",
              sign: _this.tool.sign("/wisdomlearn/userCollection/insertUserCollectionInfo", time),
              timestamp: time,
            },
            data: {
              collectionId: cid,
            },
          })
          .then((res) => {
            if ("00000" === res.retCode) {
              if (res.data) {
                _this.collectionFlag = "1";
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (param == "1") {
        //取消收藏
        let time = new Date().valueOf();
        _this
          .$http({
            url: "/wisdomlearn/userCollection/deleteUserCollectionInfo",
            method: "post",
            headers: {
              accessToken: _this.config.token,
              userId: JSON.parse(_this.tool.getCookie("xinyun-front-userInfo")).userId,
              appId: "appid-xinyun-0003",
              sign: _this.tool.sign("/wisdomlearn/userCollection/deleteUserCollectionInfo", time),
              timestamp: time,
            },
            data: {
              collectionId: cid,
            },
          })
          .then((res) => {
            if ("00000" === res.retCode) {
              if (res.data) {
                _this.collectionFlag = "0";
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    onCourse(id) {
      this.courseFlag = id;
      if (this.courseFlag == "1") {
        //课时
        let videoTime = this.courseData.videoTime;

        // let reVideoTime = moment("string").format(new Date());
        let formatVideoTime = this.formatSeconds(videoTime);
        let courseContent = [
          {
            id: this.courseData.coursewareId,
            keshi: "课时1",
            title: this.courseData.name,
            img: "",
            time: formatVideoTime,
          },
        ];
        this.contentList = courseContent;
      } else if (this.courseFlag == "2") {
      } else if (this.courseFlag == "3") {
      }
    },
    onVideo() {
      // Msg.$emit("data", "1");
      // let videoName = this.courseData.videoUrl;
      // {name: 'courseware-courseWareDetail',params:course,
      // query:{id:course.coursewareId}}
      this.$router.push({
        name: "courseware-video",
        params: this.courseData,
        query: { id: this.courseData.coursewareId },
      });
    },
    //学习课件
    onlearn() {
      this.$router.push({
        path: "/courseware/index",
      });
    },
    comeLearn() {
      this.fontFlag = true;
    },
    leaveLearn() {
      this.fontFlag = false;
    },
    formatSeconds(value) {
      var theTime = parseInt(value); // 需要转换的时间秒
      var theTime1 = 0; // 分
      var theTime2 = 0; // 小时
      var theTime3 = 0; // 天
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60);
          theTime1 = parseInt(theTime1 % 60);
          if (theTime2 > 24) {
            //大于24小时
            theTime3 = parseInt(theTime2 / 24);
            theTime2 = parseInt(theTime2 % 24);
          }
        }
      }
      var result = "";
      if (theTime > 0) {
        result = "" + parseInt(theTime) + "秒";
      }
      if (theTime1 > 0) {
        result = "" + parseInt(theTime1) + "分" + result;
      }
      if (theTime2 > 0) {
        result = "" + parseInt(theTime2) + "小时" + result;
      }
      if (theTime3 > 0) {
        result = "" + parseInt(theTime3) + "天" + result;
      }
      return result;
    },
  },
};
</script>
<style scoped>
.course-bo-content-img,
.learn-course-font,
.collect-star {
  cursor: pointer;
}
.collect-star img {
  width: 20px;
  height: 20px;
}
.bottom-line {
  border-bottom: 5px solid #084dcd;
}
.course-font {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  cursor: pointer;
  margin: 3px 8px 3px 8px;
}
.course-zw1 {
  flex: 2;
}
.course-zw2 {
  flex: 10;
}
.course-catalog {
  flex: 1;
}
.course-intro {
  flex: 1;
}
.course-ppt {
  flex: 1;
}
.course-infos .path {
  padding-top: 21px;
  padding-left: 100px;
  padding-bottom: 21px;
  line-height: 21px;
  letter-spacing: 0.08px;
  font-size: 21px;
  color: #727376;
  font-family: PingFangSC-Medium;
  background-color: #faf9f9;
}
.el-tabs__content {
  background-color: #ffffff;
}
.course-info-main {
  min-height: 1080px;
  background-color: #f2f2f2;
}
.c {
}
i {
  font-style: normal;
}
.l {
  font-size: 36px;
  height: 30%;
}
.course-fu-title {
  height: 30%;
}
.course-liji {
  height: 30%;
  display: flex;
  align-items: flex-end;
}
.course-bo {
  display: flex;
  height: 427.5px;
  max-width: 1152px;
  margin: 0 auto;
  background-color: #ffffff;
}
.course-title {
  height: 56px;
  max-width: 1152px;
  margin: 0 auto;
  background-color: #f9f9f9;
  display: flex;
  font-family: PingFangSC-Medium;
  letter-spacing: 0.08px;
}
.course-share {
  display: flex;
  justify-content: flex-end;
}
.course-collect {
  margin-right: 80px;
  margin-top: 2px;
}
.course-bo .course-bo-content-left {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.course-bo .course-bo-content-right {
  flex: 1.3;
  padding: 73px 42px 70px 29px;
}
.font-color {
  color: #084dcd;
}
</style>